import React from 'react';
import { Layout,Space } from 'antd';
// import logo from './logo.svg';
import './App.css';
import { Content, Header } from 'antd/es/layout/layout';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Sider from 'antd/es/layout/Sider';
import SideMenu from './SideMenu';
import routes from './route/route';
const headerStyle = {
  textAlign: 'left',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};
const siderStyle = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};

const App = ()=>(
  <Space
    direction='vertical'
    style={{
      width:'100%'
    }}
    size={[0,48]}
  >
    <Layout>
      <Header style={headerStyle}>
        header
      </Header>
      <Layout hasSider>
        <Sider style={siderStyle}>
          <SideMenu/>
        </Sider>
        <Content style={contentStyle}>
        <Switch>
          {routes.map((route, index) => (
            <Route key={index} path={route.path} component={route.component} />
          ))}
        </Switch>
        </Content>
      </Layout>
    </Layout>
  </Space>
)

export default App;
